<template>
  <div id="voteMaintain">
    <h1 class="con-right-title">
      投票维护
    </h1>
    <div class="bottom-box">
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <div class="table-conBtn">
          <freshCom @searchList="LoadLabel"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="60" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column label="内容类型" prop="type" min-width="100">
            <template slot-scope="scope">
              <span
                v-if="scope.row.type"
                class="tag-span"
                :class="scope.row.type | filterClass('contType')"
                >{{ scope.row.type | filterName('contType') }}</span
              >
              <span class="tag-span Info" v-else>未关联</span>
            </template>
          </el-table-column>
          <el-table-column
            label="活动编号(ID)"
            prop="id"
            min-width="120"
          ></el-table-column>
          <el-table-column
            label="活动名称"
            prop="category.activityName"
            min-width="120"
          ></el-table-column>
          <el-table-column
            label="内容描述"
            prop="content.text"
            :show-overflow-tooltip="true"
            min-width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.content.text">{{
                scope.row.content.text
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="投票量"
            prop="voteCount"
            min-width="120"
          ></el-table-column>
          <el-table-column label="视图预览" prop="view" min-width="120">
            <template slot-scope="scope">
              <listImgShow :imgInfo="scope.row.content.imgJson"></listImgShow>
            </template>
          </el-table-column>
          <el-table-column
            label="用户名"
            prop="user.name"
            min-width="120"
          ></el-table-column>
          <el-table-column
            label="大鹏号"
            prop="user.dpAccount"
            min-width="120"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createdDate"
            min-width="120"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDetail(scope.row)">
                查看详情
              </el-button>
              <el-button type="text" @click="handleAmount(scope.row)">
                设置投票量
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="LoadLabel"
        ></pageCom>
      </div>
    </div>
    <amountDialog
      v-if="sortData.isShow"
      :sort-data="sortData"
      @refresh="refresh"
    ></amountDialog>
    <!-- 查看详情 dialog -->
    <detailDialog
      v-if="detailData.isShow"
      :detail-data="detailData"
    ></detailDialog>
  </div>
</template>
<script>
import { getSearchList } from '@/api/activeManagement/voteMaintain' // 接口
import topSearch from '@component/activeManagement/voteMaintain/topSearch' // 上部搜索条件
import amountDialog from '@component/activeManagement/voteMaintain/amountDialog' // 创建编辑弹窗
import detailDialog from '@component/activeManagement/voteMaintain/detailDialog' // 查看详情弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'postCommentList',
  msg: '投票维护',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    amountDialog,
    detailDialog
  },
  data() {
    return {
      loading: true,
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 搜索条件
      formInline: {
        type: '',
        userValue: '',
        userType: 'DAPENGACCOUNT',
        activityId: '',
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      tableData: [],
      sortData: {
        isShow: false, // 默认隐藏
        params: '' // 编辑时，传递的参数
      },
      // 查看详情
      detailData: {
        // 默认隐藏
        isShow: false,
        params: ''
      },
      // 选中的行
      multipleSelection: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.LoadLabel()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    LoadLabel() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      let params = this.changeToForm(obj)
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
      }
    },
    // 提交
    handelsubmit() {
      this.$confirm('确定要提交该消息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    },
    // 查看详情
    handleDetail(row) {
      this.detailData.isShow = true
      this.detailData.params = row
    },
    // 设置投票量
    handleAmount(row) {
      this.sortData.isShow = true
      this.sortData.params = row
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.LoadLabel()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.LoadLabel()
    },
    /* 重置 */
    reset() {},
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.LoadLabel()
    }
  }
}
</script>
<style lang="less">
#voteMaintain {
  @import url('~@common/style/imgBox.less');
  .table-conBtn {
    padding-left: 30px !important;
  }
  .el-table {
    margin-top: 20px;
  }
  .tag-success {
    background: #1dc8a4;
  }
}
</style>
